<template>
  <div>
    <lay-card>
      <p class="header-title">分类筛选器</p>
    </lay-card>
    <lay-container :fluid="true" style="padding: 10px;padding-top: 0px;">
      <lay-card>
        <select-filter :data="data" :selected-values="selectedValues" :label-width="80"
                          @on-change="change"></select-filter>

        <pre>{{ filterData }}</pre>
      </lay-card>
    </lay-container>
  </div>
</template>

<script lang="ts" setup>
import SelectFilter from "@/components/SelectFilter/index.vue"
const data = ref([
  {
    title: "状态(单)",
    key: "state",
    options: [
      {
        label: "全部",
        value: ""
      },
      {
        label: "待审核",
        value: "1",
        icon: "el-icon-flag"
      },
      {
        label: "已退回",
        value: "2",
        icon: "el-icon-bottom-left"
      },
      {
        label: "已关闭",
        value: "3",
        icon: "el-icon-circle-close"
      },
      {
        label: "已完成",
        value: "4",
        icon: "el-icon-checked"
      }
    ]
  },
  {
    title: "类型(多)",
    key: "type",
    multiple: true,
    options: [
      {
        label: "全部",
        value: ""
      },
      {
        label: "请假申请",
        value: "1"
      },
      {
        label: "加班申请",
        value: "2"
      }
    ]
  }
])
const selectedValues = ref({
  state: [""],
  type: [""]
})
const filterData = ref({})

function change(selected) {
  filterData.value = selected
}
</script>

<style scoped>
.header-title {
  font-size: 20px;
  font-weight: 500;
  margin-top: 12px;
  margin-bottom: 20px;
}

.header-describe {
  font-size: 14px;
  margin-bottom: 12px;
}
</style>
